<template>
	<view class="container bg-grey">
		<sb-back-icon></sb-back-icon>
		<view class="content pad30 flex flex-col a-c relative">
			<view class="icon-content absolute flex a-c">
				<u-icon name="setting" size="40" class="marh10" color="#fff"
					@click="$go2('/pages/main/setting/setting')"></u-icon>
			</view>
			<view class="flex a-c j-s" @click="handleCheckLogin">
				<view class="flex a-c flex-col">
					<u-gap height="30"></u-gap>
					<u-image width="160rpx" shape="circle" height="160rpx" :src="info.avatar" />
					<u-gap height="30"></u-gap>
					<view class="font30 c-w">
						{{ info.nickname || "Login Now" }}
					</view>
				</view>
			</view>
		</view>
		<u-gap height="30"></u-gap>
		<view class="padh20">
			<u-grid class="bg-white" col="5" :border="false">
				<u-grid-item class="item car" v-for="(item, index) in orderStatus" :key="index"
					@click="$go2(`/pages/main/order/list?current=${item.id}`)">
					<u-badge v-if="item.count" class="car-num" :count="item.count" type="error" :offset="item.offset">
					</u-badge>
					<u-icon :name="item.icon" :size="48" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1 font24 marv20">{{ item.name }}</view>
				</u-grid-item>
			</u-grid>
			<u-gap height="20"></u-gap>
			<u-cell-group>
				<u-cell-item icon="order" title="All Orders" @click="$go2('/pages/main/order/list?current=0')" />
				<u-cell-item icon="coupon" @click="$go2('/pages/sales/discount-coupon/discount-coupon')"
					title="Coupons">
				</u-cell-item>
				<u-cell-item icon="car-fill" @click="$go2('/pages/main/address/list')" title="Address">
				</u-cell-item>
			</u-cell-group>
		</view>
		<view class="t-c c-d padv40 font24"> PROVIDE BY ORDERAFICA 2022 </view>
	</view>
</template>

<script>
	import { mapActions, mapState } from "vuex";
	export default {
		data() {
			return {
				info: {},
				orderStatus: [{
						id: 1,
						name: "UnPaid",
						icon: "red-packet",
						code: "DFK",
						offset: [16, 35],
					},
					{
						id: 2,
						name: "Checking",
						icon: "file-text",
						code: "DSH",
						offset: [16, 35],
					},
					{
						id: 3,
						name: "UnDelivery",
						icon: "order",
						code: "DFH",
						offset: [16, 35],
					},
					{
						id: 4,
						name: "UnRecived",
						icon: "car",
						code: "DQS",
						offset: [16, 35],
					},
					{
						id: 5,
						name: "Finished",
						icon: "car",
						code: "YWC",
						offset: [16, 35],
					},
				],
			};
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500);
			this.getOrderInfos();
		},
		onLoad() {
			if (this.$checkLogin()) this.getInfo();
			else this.info = {};
		},
		computed: {
			...mapState(["tabbarList"]),
		},
		methods: {
			...mapActions(["getCount"]),
			goOver() {
				uni.navigateTo({
					url: "../order/order",
				});
			},

			handleCheckLogin() {
				if (this.isEmptyObj(this.info)) this.$redirect2Login();
			},

			async getInfo() {
				let { success, data } = await this.$get("/user/getUserInfo");

				if (success) this.info = data;
			},
			async getOrderInfos() {
				let { data } = await this.$get("/order/my-statisic-count");
				if (data) {
					this.orderStatus.forEach((item, index) => {
						Object.keys(data).map((key) => {
							if (key === item.code) item.count = data[key];
						});
					});
				}
			},
		},
		onShow() {
			this.getInfo();
			this.getOrderInfos();
			this.getCount();
		},
	};
</script>

<style scoped lang="scss">
	.container {
		/deep/ {
			.u-tabbar__content {
				position: absolute;
			}
		}
	}

	.content {
		background: #080808;

		.icon-content {
			right: 20rpx;
			top: 20rpx;
		}

		.statisic {
			margin: 40rpx 20rpx;

			.num {
				font-size: 60rpx;
				color: #000;
				padding: 0 6rpx;
				position: relative;
				bottom: -10rpx;
			}
		}

		/deep/ .u-image__image {
			border: 1px solid #ccc;
		}

		.study-rec {
			margin: 40rpx 0;

			.item {
				margin: 0 10rpx;

				image {
					width: 214rpx;
					height: 114rpx;
				}
			}
		}

		.cell-icon {
			margin-right: 10rpx;
			width: 34rpx;
			height: 34rpx;
		}
	}
</style>
